<template>
  <div class="filtrateCompany">
    <van-popup v-model="filtShow" position="top" :style="{ height: '80%' }">
      <div class="top_bussiness">
        <!-- 顶部搜索栏 -->
        <div class="search-top">
          <div class="left">
            <h3>公司</h3>
          </div>
          <div class="right">
            <van-search
              shape="round"
              v-model="value"
              placeholder="请输入搜索关键词"
              @search="onSearch(value)"
            />
          </div>
        </div>
        <!-- 公司筛选 -->
        <div class="bussiness-nav">
          <span
            class="active"
            @click="look"
            :class="idss === 1 ? 'actived' : ''"
            >推荐</span
          >
          <span
            >距离
            <span class="arrow-box"
              ><i
                class="iconfont rotate iconicon_xuanze_sel cll"
                @click="lookclass(2)"
                :class="item === 2 ? 'actived' : ''"
              ></i
              ><i
                class="iconfont iconbtm  iconicon_xuanze_sel cll"
                @click="lookclass(3)"
                :class="item === 3 ? 'actived' : ''"
              ></i
            ></span>
            <!-- <i class="iconfont">&#xe7ee;</i>
          <i class="iconfont">&#xe7ed;</i> -->
          </span>
          <span
            >评分
            <span class="arrow-box"
              ><i
                class="iconfont rotate iconicon_xuanze_sel"
                @click="faceclass(4)"
                :class="itemss === 4 ? 'actived' : ''"
              ></i
              ><i
                class="iconfont iconbtm  iconicon_xuanze_sel"
                @click="faceclass(5)"
                :class="itemss === 5 ? 'actived' : ''"
              ></i
            ></span>
          </span>
          <span class="filtrate actived">筛选</span>
        </div>
      </div>
      <!-- 条件列表 -->
      <div class=" condition">
        <van-cell title="距离" class="distance" />
        <div class="tiaojian">
          <div
            class="item"
            @click="distanced(1)"
            :class="distan === 1 ? 'actived' : ''"
          >
            由远及近
          </div>
          <div
            class="item"
            @click="distanced(2)"
            :class="distan === 2 ? 'actived' : ''"
          >
            由近及远
          </div>
        </div>
        <van-cell title="评分" class="score" />
        <div class="tiaojian">
          <div
            class="item"
            @click="sccore(1)"
            :class="sccoress === 1 ? 'actived' : ''"
          >
            4分~5分
          </div>
          <div
            class="item"
            @click="sccore(2)"
            :class="sccoress === 2 ? 'actived' : ''"
          >
            3分~4分
          </div>
        </div>
        <div class="tiaojian">
          <div
            class="item"
            @click="sccore(3)"
            :class="sccoress === 3 ? 'actived' : ''"
          >
            2分~3分
          </div>
          <div
            class="item"
            @click="sccore(4)"
            :class="sccoress === 4 ? 'actived' : ''"
          >
            1分~2分
          </div>
        </div>
        <div class="tiaojian">
          <div
            class="item"
            @click="sccore(5)"
            :class="sccoress === 5 ? 'actived' : ''"
          >
            1分以下
          </div>
          <div class="item dis"></div>
        </div>
        <!-- 按钮区域 -->
        <div class="btn">
          <div class="btn-left">
            <van-button
              type="warning"
              class="btn-style"
              color="#ffe2e9"
              @click="clear"
              >清除</van-button
            >
          </div>
          <div class="btn-right">
            <van-button type="danger" class="btn-style" @click="confirms"
              >确认</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  // props: ['companylists'],
  data () {
    return {
      filtShow: false,
      value: '',
      item: 1,
      idss: 1,
      itemss: 0,
      distan: 0,
      sccoress: 0,
      scores: 0,
      scoreRange: '',
      obj: {
        distan: this.distan,
        scores: this.scores,
        scoreRange: this.scoreRange
      }
    }
  },
  methods: {
    lookclass (index) {
      this.idss = 0
      if (index === 2) {
        console.log(this.$parent)
        this.item = 2
        this.distance = 'desc'
        this.$parent.companylists = []

        this.$emit('onLoad', this.obj)
      } else if (index === 3) {
        this.item = 3
        this.distance = 'asc'
        this.$parent.companylists = []
        this.$emit('onLoad', this.obj)
      }
      console.log(this.itemss)
    },
    faceclass (index) {
      this.idss = 0
      if (index === 4) {
        this.itemss = 4
        this.scores = 'desc'
        this.$parent.companylists = []
        this.$emit('onLoad', this.obj)
      } else if (index === 5) {
        this.itemss = 5
        this.scores = 'asc'
        this.$parent.companylists = []
        this.$emit('onLoad', this.obj)
      }
    },
    look () {
      this.item = 1
      this.itemss = 1
      this.idss = 1
    },
    distanced (index) {
      if (index === 1) {
        this.distan = 1
        this.distance = 'asc'
        this.$parent.companylists = []
        this.$emit('onLoad', this.obj)
        console.log(index)
      } else if (index === 2) {
        this.distance = 'desc'
        this.$parent.companylists = []
        this.$emit('onLoad', this.obj)
        this.distan = 2
      }
    },
    sccore (index) {
      if (index === 1) {
        this.sccoress = 1
        this.scoreRange = '4-5'
        this.$emit('onLoad', this.obj)
        this.$parent.companylists = []
      } else if (index === 2) {
        this.sccoress = 2
        this.scoreRange = '3-4'

        this.$parent.companylists = []
      } else if (index === 3) {
        this.sccoress = 3
        this.scoreRange = '2-3'

        this.$parent.companylists = []
      } else if (index === 4) {
        this.sccoress = 4
        this.scoreRange = '1-2'

        this.$parent.companylists = []
      } else if (index === 5) {
        this.sccoress = 5
        this.scoreRange = '0-1'

        this.$parent.companylists = []
      }
    },
    onSearch (value) {
      this.$emit('onSearch', value)
      this.filtShow = false
    },
    // 清除
    clear () {
      this.item = 10
      this.itemss = 10
      this.distan = false
      this.sccoress = false
      this.filtShow = false
    },
    confirms () {
      this.item = 10
      this.itemss = 10
      this.distan = false
      this.sccoress = false
      this.filtShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.actived {
  color: #e40137 !important;
}
.filtrateCompany {
  .top_bussiness {
    margin-bottom: 10px;
    .search-top {
      display: flex;
      .left {
        flex: 2;
        text-align: center;
        font-size: 16px;
        padding-top: 2px;
      }
      .right {
        flex: 10;
        padding-top: 5px;
      }
    }
    .bgc-middle {
      img {
        width: 100%;
        height: 100%;
      }
      padding: 15px;
    }
    .bussiness-nav {
      font-size: 14px;
      padding: 15px;
      span {
        padding-right: 50px;
      }

      .filtrate {
        float: right;
        text-align: right;
        padding: 0;
      }
      .arrow-box {
        padding-right: 0px;
        //   // display: inline-block;
        // display: flex;
        // flex-direction: column;
        //   width: 3px;
        //   height: 3px;
        position: relative;
        // padding: 5px 0;
        // top: 0;
        // left: 0;
        color: #b4b4bc;
        .iconbtm {
          position: absolute;
          top: 0px;
          left: 0px;
          padding: 0;
          margin-top: 5px;
        }
        .rotate {
          display: inline-block;
          position: absolute;
          bottom: 3px;
          left: 0px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .condition {
    .distance {
      font-weight: 700;
      font-size: 18px;
    }
    .score {
      font-weight: 700;
      font-size: 18px;
      margin-top: 20px;
    }
    .tiaojian {
      display: flex;
      height: 60px;
      line-height: 30px;
      //   margin-bottom: 30px;
      .dis {
        background-color: #fff !important;
      }
      .item {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #000000;
        width: 100%;
        height: 30px;
        background-color: #f9f8f8;
        margin: 0 20px;
        // padding: 4px 20px;
        // background-color: #cccccc;
      }
    }
    .tiaojian:last-child {
      .item:last-child {
        background-color: #ffffff;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      .btn-left {
        flex: 4;
        text-align: center;
        /deep/ .van-button__text {
          color: #e40137;
          padding: 0 20px;
        }
      }
      .btn-right {
        flex: 8;
        text-align: center;
        /deep/ .van-button__text {
          //   color: #e40137;
          padding: 0 80px;
        }
      }
      .btn-style {
        border-radius: 5px;
      }
    }
  }
}
</style>
